<template>
  <div class="tab">
    <div class="box-img">
       <div class="tab-a">
         <div @click="activeAdd" class="left">《</div>
        <img :src="data.imgs[data.num]" class="img" />
        <div @click="activeDel" class="left">》</div>
      </div>
      </div>
     </div>
</template>
<script setup>
import { ref, reactive } from "vue";
const data = reactive({
   imgs: [
    "https://wx2.sinaimg.cn/mw690/ad6a65e1gy1h3li25kaxnj21kw1kwn4z.jpg",
   "https://wx3.sinaimg.cn/mw690/ad6a65e1gy1h3li26ksoyj20u00u0acs.jpg",
   "https://wx1.sinaimg.cn/mw690/ad6a65e1gy1h3lzbenrcpj21kw1kwtfl.jpg",
   "https://wx4.sinaimg.cn/mw690/ad6a65e1ly1h3lzbez41bj21kw1kwq9y.jpg"
   ],
  num: 0,
});

const activeAdd = (i) => {
  if (data.num == 0) {
    data.num = data.imgs.length - 1;
  } else {
    data.num--;
  }
  console.log(data.num);
};

const activeDel = (i) => {
  if (data.num == data.imgs.length - 1) {
    data.num = 0;
  } else {
    data.num++;
  }
  console.log(data.num);
};
</script>

<style lang="scss" scoped>
.tab {
  text-align: center;
  margin-top: 200px;
  .box-img {
    width: 100%;
    position: relative;

    .img {
      width: 300px;
      height: 300px;
      margin: 0 20px;
    }

    .tab-a {
      width: 400px;
      position: absolute;
      left: 50%;
      margin-left: -200px;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .left {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 35px;
        background: #eee;
      }
    }
  }
}
</style>
